<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>开单</text>
			</view>
		</view>
		<view :style="{marginTop:(49+top)+'px'}">
			<tui-list-cell v-if="!member.username" @click="openPage('./choose/choose')" :arrow="true"  padding="40rpx 30rpx">
				<view class="tui-item-box">
					<image src="../../static/images/icon/user2.png" mode="widthFix"></image>
					<text class="tui-list-cell_name">请选择会员</text>
				</view>
			</tui-list-cell>
			<tui-list-cell :lineLeft="false" @click="openPage('./choose/choose')" v-if="member.username">
				<view class="tui-item-box">
					<view class="tui-msg-box">
						<image :src="member.avatar" class="tui-msg-pic avatar" mode="widthFix"></image>
						<view class="tui-msg-item">
							<view class="tui-msg-name">
							{{member.username}}<text style="font-size: 14px;padding-left: 10px;">({{member.mobile}})</text>
							<image v-if="member.group_id >0" :src="website+'/static/images/icon/lv'+member.group_id+'.png'" mode="widthFix" style="width: 30px;vertical-align: bottom;"></image>
							</view>
							<view class="tui-msg-content">会员编码：{{member.UN}} <text style="padding-left: 20px;">余额：</text><text style="color: #FF0000;font-weight: 700;">￥{{member.money}}</text></view>
						</view>
					</view>
				</view>
			</tui-list-cell>
		</view>
		<view class="search">
			<view class="searchbox">
				<view class="tui-input-title pull-left">						
				<tui-icon name="search-2" :size="40" unit="rpx" color="#a4a4a4"></tui-icon></view>
				<input placeholder-style="color: #a4a4a4;font-size:28upx" @input="inputKw"  @confirm="searchGoods" value="" confirm-type="search" type="text" class="tui-input pull-left" placeholder="搜索产品名称" v-model="kw" placeholder-class="tui-phcolor" />
			</view>
			<view class="btn-items">
				<input type="text" :value="p1" placeholder="最低价格" @input="inputP1" /> 
				<text class="line">-</text> 
				<input type="text" :value="p2" placeholder="最高价格" @input="inputP2" @confirm="searchGoods"/>
			</view>
		</view>
		<view class="goods-list">
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-into-view="scrollViewId" :style="{ height: height + 'px', top: top2 + 'px' }">
				<view v-for="(item, index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="swichNav">
					<text>{{ item }}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right-box" :style="{ height: height + 'px', top: top2 + 'px' }" @scrolltolower="getMoreGoods">
				<!--内容部分 start 自定义可删除-->
				<view class="page-view">
					<view class="class-box">
						<view class="class-item">
							<view class="class-name"></view>
							<view class="g-container">
								<view class="tui-goods-item" v-for="(item,index) in goodsList" :key="item.id">
									<image :src="item.img" class="tui-goods-img"  mode="aspectFill"/>
									<view class="tui-goods-info">
										<view class="tui-goods-title">
											{{item.name}}
										</view>
										<view class="tui-price-box">
											<view class="tui-goods-price">￥{{item.price}}</view>
											<tui-numberbox :value="item.buyNum" :height="36" :width="80" :min="0" :max="100000" :index="index" @change="changeNum"></tui-numberbox>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--内容部分 end 自定义可删除-->
			</scroll-view>
		</view>
		<!--tabbar-->
		<view class="tui-tabbar">
			<view class="tui-checkAll">
				<view style="width: 100%;color: #666;font-size: 14px;"><tui-icon name="cart" :size="19"></tui-icon>已选({{buyNum}})</view>
			</view>
			<view>
				<tui-button width="200rpx" height="80rpx" :size="30" type="danger" shape="circle"  @click="btnPay">确定</tui-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				website:this.tui.imghost,
				mid:0,
				member:{},
				top:0,
				top2:0,
				kw:"",
				p1:"",
				p2:"",
				page:1,
				tabbar: [
					'储值卡',
					'会员卡',
					'次卡',
					'套餐卡',
				],
				height: 0, //scroll-view高度
				currentTab: 0, //预设当前项的值
				scrollViewId:"id_0",
				buyNum:0,
				goodsList:[],
				param:"",
			}
		},
		onLoad(opt) {
			this.mid = opt.mid;
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					// this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					this.height = res.windowHeight - this.top - 170;
					this.top2=this.top +170;
					// this.scrollH = res.windowWidth * 0.6
				}
			})
			this.page=1;
			this.goodsList=[];
			this.getMemberInfo();
			this.getGoods();
		},
		onShow() {
			// this.tui.chkAuth();
			// this.page=1;
			// this.goodsList=[];
			// this.getMemberInfo();
			// this.getGoods();
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			openPage(v){
				uni.navigateTo({
					url:v
				})
			},
			getMemberInfo(){
				if(!this.mid){return false;}
				this.tui.get('user/api/getMem',{id:this.mid}).then(res=>{
					this.member = res.data;
				})
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur;
					this.page=1;
					this.goodsList=[];
					this.clearSearchBox();
					this.checkCor();
					this.getGoods();
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.currentTab > 6) {
					this.scrollViewId = `id_${this.currentTab - 2}`;
				} else {
					this.scrollViewId = `id_0`;
				}
			},
			clearSearchBox(){
				this.kw='';
				this.p1='';
				this.p2='';
			},
			getGoods(){
				this.tui.get('user/api/cardlist',{page:this.page,type:this.currentTab,kw:this.kw,p1:this.p1,p2:this.p2}).then(res=>{
					this.goodsList = [...this.goodsList,...res.data.data];
				});
			},
			calcHandle() {
				let buyNum = 0;
				let totalPrice = 0;
				let gids =[];
				this.goodsList.map((item) => {
					buyNum += (item.buyNum?item.buyNum:0);
					if(item.buyNum >0){
						gids.push(item.id + '-'+item.buyNum);
					}
					// totalPrice += parseFloat(item.price) * (item.buyNum?item.buyNum:1);
					// console.log(totalPrice);
				})
				this.param = gids.join(',');
				this.buyNum = buyNum
				this.oldTotalMoney = Math.floor(totalPrice,2)
			},
			changeNum: function(e) {
				// this.goodsList[e.index].buyNum = e.value
				this.$set(this.goodsList[e.index],'buyNum',e.value)
				
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			inputP1(e){this.p1 = e.detail.value;},
			inputP2(e){this.p2 = e.detail.value;},
			inputKw(e){this.kw = e.detail.value;},
			searchGoods: function() {
				this.page=1;
				this.goodsList=[];
				this.getGoods();
			},getMoreGoods(){
				// console.log(this.page);
				this.page++;
				this.getGoods();
			},btnPay(){
				if(!this.mid){
					uni.showModal(
					{
						title:'提醒',
						content:"请先选择会员"
					}
					)
					return;
				}
				if(!this.param){
					uni.showModal({
						title:'提醒',
						content:"要至少选择一个产品"
					})
					return;
				}
				uni.navigateTo({
					url:'Billing/Billing?mid='+this.mid+'&param='+this.param
				})
			}
		}
	}
</script>

<style>
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
		
	}
	.tui-item-box image{
		width: 22px;
		margin-right: 15px;
	}
	.tui-item-box .avatar{
		width: 40px;
		margin-right: 15px;
	}
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}
	
	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}
	
	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	.search{
		height:90upx;padding: 10upx 20upx 20upx;
		display: flex;
		
	}
	.search .searchbox{
		display: block;border-radius: 80upx;padding: 30upx 0 0 40upx;
		width: 100%;
		background: #fbfbfb;overflow: auto;}
	
	.search .tui-input-title{width: 40upx;display: inline-block;min-width: 40upx;}
	.search .tui-input{width: 80%;display: inline-block;font-size: 28upx;}
	.search .btn-items{width: 100%; display: flex;padding-left: 10px;padding-top: 5px;}
	.search .btn-items .line{padding:5px 10px;}
	.search .btn-items input{background: #FFF;border-radius: 5px;padding: 10px 5px 10px 5px;font-size: 24upx;}
	
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	
	.tui-searchbox {
		width: 100%;
		height: 92rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		z-index: 100;
	}
	
	.tui-searchbox::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #d2d2d2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}
	
	.tui-search-input {
		width: 100%;
		height: 60rpx;
		background: #f1f1f1;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-search-text {
		padding-left: 16rpx;
	}
	
	.tab-view {
		/* height: 100%; */
		width: 160rpx;
		position: fixed;
		left: 0;
		z-index: 10;
	}
	
	.tab-bar-item {
		width: 160rpx;
		height: 80rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
	}
	
	.active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fcfcfc;
	}
	
	.active::before {
		content: '';
		position: absolute;
		border-left: 8rpx solid #e41f19;
		height: 30rpx;
		left: 0;
	}
	
	/* 左侧导航布局 end*/
	
	.right-box {
		width: 100%;
		position: fixed;
		padding-left: 160rpx;
		box-sizing: border-box;
		left: 0;
	}
	.page-view {
		width: 100%;
		overflow: hidden;
		padding-right: 20rpx;
		box-sizing: border-box;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.slide-image {
		width: 100%;
		height: 220rpx;
	}
	
	.class-box {
		padding-top: 0;
		padding-bottom: 130upx;
	}
	
	.class-item {
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
	}
	
	.class-name {
		font-size: 22rpx;
	}
	
	.g-container {
		/* padding-top: 20rpx; */
		display: flex;
		display: -webkit-flex;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.g-box {
		width: 33.3333%;
		text-align: center;
		padding-top: 40rpx;
	}
	
	.g-image {
		width: 120rpx;
		height: 120rpx;
	}
	
	.g-title {
		font-size: 22rpx;
	}

.tui-goods-num {
		font-weight: bold;
		color: #e41f19;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 30upx 0;
		box-sizing: border-box;
		width: 100%;
	}
	.tui-goods-img {
		width: 140rpx;
		height: 140rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}
	
	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}
	
	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}
	
	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	
	.tui-goods-price {
		font-size: 24rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}
	
	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}
	.tui-total-price>.tui-bold{color: #FF0000;}
	.tui-total-price>.line-text{color: #999;text-decoration: line-through;padding-left: 10px;font-size: 13px;}
	.tui-price-box >>> .tui-numbox-icon{
		border-radius: 25px;
		border:2px solid #FF0000;
		color: #FF0000 !important;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}.tui-price-box >>> .tui-numbox-icon.tui-disabled{
		border-radius: 25px;
		border:2px solid #EEEEEE;
		color: #EEEEEE !important;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}
	.tui-price-box >>> .tui-numbox-icon.tui-icon-plus{
		border-radius: 25px;
		border:2px solid #FF0000;
		color: #FFF !important;
		background-color: #FF0000;
		box-sizing: border-box;
		padding: 3px 3px 1px 3px;
		transform: scale(0.7);
	}
	.tui-price-box >>> .tui-num-input{
		margin: 0;
	}
	.tui-tabbar {
		width: 100%;
		height: 130rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 999;
	}
	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.tui-checkAll {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.tui-checkbox-pl {
		padding-left: 12rpx;
	}
	.tui-total-price {
		font-size: 32rpx !important;
		padding-top: 10px;
		color: #999999;
	}
</style>
